<template>
  <div class="tableContainer"    :style="{height:computedHeight}">
    <el-table
      v-loading="loading"
      element-loading-text=" "
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)"
      :data="tableData"
      :height="paginationShow? this.autoHeightCom - 50 : this.autoHeightCom"
      :header-cell-style="tableHeaderColor"
      :cell-style="cellStyle"
      :row-key="rowKey"
      @selection-change="handleSelectionChange"
      ref="table"
      :empty-text="emptyTextReal"
      :highlight-current-row="radioSelect"
      @current-change="radioHandleCurrentChange"
      @row-click="rowClick"
      @row-dblclick="rowDblclick"
    >

      <el-table-column
        align="center"
        v-if="showSelection"
        type="selection"
        :reserve-selection="true"
        width="55"
        
      >
      </el-table-column>

      <el-table-column
        v-if="showIndex"
        label="序号"
        type="index"
        width="70"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-for="item in keySet"
        :key="item.label"
        :label="item.label"
        :width="item.width=== 'labelWidth' ?(item.label&&item.label.length * 14 + 28) :item.width ? item.width   :  undefined"
        :min-width="item.minWidth ? item.minWidth : 100"
        :show-overflow-tooltip="
          item.showOverflowTooltip === false ? false : true
        "
        :align="item.align ? item.align : 'left'"
        showIndex
      >
        <template #default="{ row, $index }">
          <span v-if="item.isSlot" class="names">
            <slot :name="item.slotName" :row="row" :index="$index"></slot>
          </span>
          <span v-else class="names">
            {{ row[item.englishName] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        :width="handlerShowWidth"
        :fixed="handlerFixed"
        v-if="handlerShow"
      >
        <template #default="{ row, $index }">
          <slot name="handler" :row="row" :index_="$index"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div
    v-if="paginationShow" 
    >
      <el-pagination
      style="float: right;margin-top: 10px;"
        :currentPage="pageNumber"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "tableList",
  props: {
    keySet: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    handlerShow: {
      type: Boolean,
      default: false,
    },
    handlerShowWidth: {
      type: String,
      default: "150",
    },
    handlerFixed: {
      type: [String,Boolean],
      default: false,
    },
    emptyText: {
      type: String,
      default: "",
    },
    showIndex: {
      type: Boolean,
      default: false,
    },
    paginationShow: {
      type: Boolean,
      default: false,
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
    radioSelect: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
      default: "100%",
    },
    heightMin:{
      default: 0,
    },
    autoHeight: {
      type: Boolean,
      default: false,
    },
    maxHeight: {
      type: String,
      default: '0',
    },
    total: {
      type: Number,
      default: 0,
    },
    pageNumber: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
    rowKey: {
      type: String,
      default: "id",
    },
  },
  data(){
    return {
      emptyTextReal: ' ',
      autoHeightCom:'0'
    }
  },
  mounted() {
    this.getAutoHeight();
  },
  methods: {
    getAutoHeight() {
      let el = document.querySelector("#app"),
        elParent = el.parentNode,
        pt = this.getStyle(elParent, "paddingTop"),
        pb = this.getStyle(elParent, "paddingBottom");
      this.$nextTick(() => {
        if(this.maxHeight == '0'){
          this.autoHeightCom = elParent.clientHeight - (pt + pb) - this.heightMin;
        }else{
          this.autoHeightCom = this.maxHeight
        }
      });
    },
    getStyle(obj, attr) {
      let result = obj.currentStyle
        ? obj.currentStyle[attr].replace("px", "")
        : document.defaultView
            .getComputedStyle(obj, null)[attr].replace("px", "");
      return Number(result);
    },

     handleCurrentChange(val){
      this.$emit("handleCurrentChange", val);
    },
    radioHandleCurrentChange(val){
      this.$emit("radioHandleCurrentChange", val);
    },
    rowClick(val){
      this.$emit("rowClick", val);
    },
    rowDblclick(val){
      this.$emit("rowDblclick", val);
    },
     handleSelectionChange(val){
      this.$emit("handleSelectionChange", {
        ids: val,
        cb: () => {},
      });
    },
     selectableIsDisabled(row){ // 多选设置为禁用
      let res = false;
      this.$emit("selectableIsDisabled", {
        row: row,
        cb: (fVal = false) => {
          res = !fVal;
        },
      });
      return res;
    },
     handleSizeChange(val)  {
      this.$emit("handleSizeChange", val);
    },
     tableHeaderColor ({ row, column, rowIndex, columnIndex })  {
      let res = { background: "#F5F8FB", color: "#383B40" };
      // if (rowIndex === 0 && columnIndex === 0) {
      //   res.paddingLeft = "6px";
      // }
      return res;
    },

     cellStyle  ({ row, column, rowIndex, columnIndex })  {
      let res = {};
      return res;
    },

    clear() {
      this.$refs.table.clearSelection();
    },
  },
  computed:{
    computedHeight(){
      return this.autoHeightCom + 'px'
    },
  },
  watch:{
    tableData(newVal,oldVal){
        if(this.emptyText){
          this.emptyTextReal = this.emptyText;
        }else{
          this.emptyTextReal = '无符合条件的数据'
        }
    }
  }
};
</script>
<style scoped lang="scss">
.tableContainer {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  // overflow: hidden auto;
  overflow-y:  auto;
    overflow-x: hidden;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.names {
  color: #383b40;
  font-weight: 400;
}
</style>
<style lang="scss">
.tableContainer {
  --el-pagination-border-radius: 2px;
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background: none;
    border: 1px solid var(--el-border-color-base);
    border-radius: var(--el-pagination-border-radius);
  }

  .el-table__fixed::before{
    background-color:transparent;
  }
}

.el-table__body tr.current-row>td.el-table__cell{
  background-color: #fbec88 !important;
}


.el-table .el-table__cell{
  padding: 4px 0;
}



</style>
